<template>
    <div class="main">
      <div class="banner">
        <div class="swiper-container lunbo1">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in banner">
              <img :src=url+item.pic_url alt="">
            </div>
          </div>
        </div>
        <div class="title">
          <div class="banner-line"></div>
          <div class="rhombus"></div>
          <p>{{adds}}</p>
          <div class="rhombus"></div>
          <div class="banner-line"></div>
        </div>
      </div>
      <div class="content">
        <div class="cantuan swiper-container lunbo2" v-show="join.length > 0">
          <div class="swiper-wrapper">
            <div  v-for="item in join" class="swiper-slide" @click="cantuan(item.open_id)">
            <div class="zzw">
              <img src="../../img/index-4.png" alt="">
              <p><span class="user">{{item.user_name}}</span><span class="name">{{item.name}}</span>差<i>{{item.cha_num}}</i>人</p>
            </div>
            <div class="pis">我要参团</div>
          </div>
          </div>
        </div>

        <div @click="kaituan(item.group_id)" class="tuan"  v-if="index == 0 && top.length % 2 != 0" v-for="(item,index) in top">
          <img :src=url+item.big_img alt="" v-if="item.big_img !== null">
          <img :src=url+item.img alt="" v-if="item.big_img == null">
          <div class="tuanbox">
            <h3>{{item.name}}</h3>
            <p>最低: ￥{{parseInt(item.minimum)}}</p>
            <div>我要开团</div>
          </div>
        </div>
        <ul>
          <li v-for="(item,index) in top" v-if="top.length % 2 != 0 ? (top.length-1 && index>0) : top.length ">
            <div @click="kaituan(item.group_id)">
              <img :src=url+item.img alt="">
              <div class="kaibox">
                <h3>{{item.name}}</h3>
                <p>最低: ￥{{parseInt(item.minimum)}}</p>
                <del>￥{{parseInt(item.show_price)}}</del>
                <div>我要开团</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="foot">
        <div  :class="{'active':(num==0)}">
          <i class="iconfont">&#xe634;</i>
          <p>首页</p>
        </div>
        <div @click="pintuan()" :class="{'active':(num==1)}">
          <i class="iconfont">&#xe625;</i>
          <p>我的拼团</p>
        </div>
      </div>
      <div class="popup" v-show="showNum == true">
        <div class="popcon">
          <h3>快来开团,体验刘涛同款护理,<br>分享好友获得更多优惠哦!</h3>
          <img src="../../img/faqi.png" alt="">
          <div><a @click="showNum = false">我知道了</a></div>
        </div>
      </div>
      <div class="zzyprop" v-show="zzyShow">
        <div class="propcon">
          <p v-if="accountType==3" class="zzyTitle" :class="{marTop:accountType==3}">代言人刘涛邀您来开团,<br>快点分享给更多好友吧！</p>
          <p v-if="accountType==1" class="zzyTitle">代言人刘涛邀您来开团,<br>分享成团后可获专属红包！</p>
          <h3 v-if="accountType==1" >红包规则：</h3>
          <p class="zzyPacket" v-if="accountType==1">开团-分享-完成拼团-领取红包</p>
          <div :class="{zzy:accountType==1,marTop1:accountType==3}"><span class="" @click="zzyShow=false">×</span></div>
          <img src="../../img/up.png" alt="">
        </div>
      </div>
      <div class="prop" v-show="isShow">
        <div class="propcon">
          <p>{{busymessage}}</p>
          <a v-if="busyNum ==4" :class="{mar:busyNum==4}" @click="lastreload(),isShow=false">确定</a>
        </div>
        <img src="../../img/up.png" alt="" v-if="num==1">
      </div>
      <judge :judgeNum="judgeNum"></judge>
      <PulseLoader v-if="loading==true"  :size="size" :color="color"></PulseLoader>
    </div>
</template>

<script>
  import $ from "jQuery"
  import "../../static/font_880fex1d3q6c4n29/iconfont.css";
  import judge from "./judge.vue";
  import bottom from "./bottom.vue"
  import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
  import "../../static/swiper.min.css"
  import Swiper from 'swiper';
  import wx from 'weixin-js-sdk';
  import {
    baseUrl,myUrl,auth,getUser,
  } from "@/assets/public"
  export default {
    data () {
      return {
        busymessage:"",
        judgeNum:"",
        data:'',
        banner:'',
        join:'',
        top:'',
        url:"",
        num:0,
        busyNum:4,
        adds:"",
        accountType:"",
        shareTitle:"美丽田园代言人刘涛邀您来开团，爱拼才美丽!",
        lineLink:"",
        imgUrls:myUrl+"/static/img/share.png",
        descContent:"越“拼”越实惠，越“拼”价越低",
        appShareTitle:"美丽田园代言人刘涛邀您来开团，爱拼才美丽!",
        join_first:"",
        showNum:true,
        zzyShow:false,
        zzypropid:"",
        isShow:false,
        index_first:"",
        loading:true,
        size:".5rem",
        color:"#333",
      }
    },
    created() {
      auth();
      getUser();
//      if(localStorage.accountType==0) {
//        this.showNum==true;
//      }

      var  that = this;
      this.lineLink =myUrl;
      this.zzypropid=this.$route.query.zzypropid;
      $.ajax({
        type:"GET",
        url: baseUrl+"/api/index",
        data:{
          "openid": localStorage.openid
        },
        dataType:"json",
        success:function (res) {
          if(res.status==200){
            console.log(res);
            that.data = res.data;
            that.banner =res.data.banner;
            that.join=res.data.join_list;
            that.top=res.data.open_list;
            that.adds=res.data.adds;
            that.accountType=res.data.accountType;
            that.index_first=res.data.index_first;

            if((that.accountType ==1 && that.zzypropid==undefined) || (that.accountType ==3 && that.zzypropid==undefined)){
              that.zzyShow = true; //会员和员工每次进入页面弹窗
            }

            if(localStorage.accountType==2 && that.index_first==0){
              that.showNum = true;
            }
            that.loading=false;
          }
        }
      });
    },
    mounted() {
      auth();
      var that =this;
      this.url = baseUrl;
      //参团

      //banner轮播
      this.$nextTick(function () {
        var swiper = new Swiper('.lunbo1', {
          pagination: '.swiper-pagination .lunbo1',
          paginationClickable: true,
          spaceBetween: 30,
          autoplay: 3000,
          observer:true,
          observeParents:true,//修改swiper的父元素时，自动初始化swiper
        });
        var mySwiper = new Swiper('.lunbo2', {
          pagination: '.swiper-pagination .lunbo2',
          paginationClickable: true,
          direction: 'vertical',
          loop:true,
          autoplay: 2000,
          autoplayDisableOnInteraction : false,
          speed:1000,
          slidesPerView: 3,
          slidesPerGroup: 3,
          observer:true,
          observeParents:true,//修改swiper的父元素时，自动初始化swiper
        });
      })
      //分享
      this.wechatShare();

      //教学
      this.join_first = this.$route.query.join;
      if(this.join_first == 0){
        this.showNum = true;
      }else {
        this.showNum = false;
      }




    },
    methods: {
      kaituan(id){
        location.href = myUrl+"/kaituan?id="+id;
      },
      cantuan(id){
        location.href = myUrl+"/cantuan?id="+id;
      },
      pintuan(){
        var that =this;
        if(localStorage.token){
          location.href = myUrl+"/availableshop";
        }else {
          $.ajax({
            url:baseUrl+"/api/checkUser",
            type:"GET",
            dataType:"json",
            data:{'openid':localStorage.openid,'access_token':localStorage.access_token,'randstr':localStorage.randstr},
            success:function (res) {
              if(res.status==200){
                location.href = myUrl+"/availableshop";
              }else if(res.status==300){
                that.judgeNum =1;
              }else if(res.status==-300){
                that.isShow=true;
                that.busyNum=4;
                that.busymessage=res.data.message;
              }
            }
          })
        }

      },
      wechatShare(){
        let that = this;
        wx.ready(function (){
          wx.onMenuShareTimeline({
            title: that.shareTitle, // 分享标题
            link: that.lineLink, // 分享链接
            imgUrl: that.imgUrls, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数

            },
            cancel: function () {}
          });
          wx.onMenuShareAppMessage({
            title: that.appShareTitle, // 分享标题
            desc: that.descContent, // 分享描述
            link: that.lineLink, // 分享链接
            imgUrl: that.imgUrls, // 分享图标
            type: 'link', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {

            },
            cancel: function () {}
          });
          wx.onMenuShareQQ({
            title: that.shareTitle, // 分享标题
            desc: that.descContent, // 分享描述
            link: that.lineLink, // 分享链接
            imgUrl: that.imgUrls, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数

            },
            cancel: function () {}
          });
          wx.onMenuShareWeibo({
            title: that.shareTitle, // 分享标题
            desc: that.descContent, // 分享描述
            link: that.lineLink, // 分享链接
            imgUrl: that.imgUrls, // 分享图标
            success: function () {
              // 用户取消分享后执行的回调函数

            },
            cancel: function () {}
          });
          wx.onMenuShareQZone({
            title: that.shareTitle, // 分享标题
            desc: that.descContent, // 分享描述
            link: that.lineLink, // 分享链接
            imgUrl: that.imgUrls, // 分享图标
            success: function () {
              // 用户取消分享后执行的回调函数

            },
            cancel: function () {}
          });
        })
      },
      lastreload(){
        window.location.reload();
      },
    },
    components:{
      judge,PulseLoader,
    }
  }
</script>

<style scoped>
  .v-spinner {
    position: fixed;
    top:0;
    width: 100%;
    height: 100vh;
    z-index: 100;
    background: #fff;
    display: flex;
    flex: 0 1 auto;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
  }
  .prop {
    width: 100%;
    height: 100vh;
    background: rgba(76,76,76,.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
  }
  .prop .propcon {
    width: 80%;
    padding:0 10%;
    height:10rem;
    margin:0 auto;
    margin-top:2rem;
    background: url("../../img/prop.png") center center no-repeat;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .prop>img {
    position: absolute;
    top:5%;
    right:13%;
  }
  .prop .propcon p {
    width: 100%;
    padding:0 20%;
    height:auto;
    text-align: center;
    margin-top:3.5rem;
    font-size:.38rem;
    line-height:.6rem;
  }
  .prop .propcon a {
    display: block;
    width: 3rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    border:1px solid #000;
    margin-bottom:2rem;
  }
  .main {
    padding-bottom:1rem;
  }
  .marTop {
    margin-top:4.5rem !important;
  }
  .marTop1 {
    margin-top:.6rem !important;
  }
  .zzyprop {
    width: 100%;
    height: 100vh;
    background: rgba(76,76,76,.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
  }
  .zzyprop .propcon {
    width: 80%;
    padding:0 10%;
    height:10rem;
    margin:0 auto;
    margin-top:3rem;
    background: url("../../img/prop.png") center center no-repeat;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .zzyprop .propcon p.zzyTitle {
    width: 100%;
    padding:0 20%;
    height:auto;
    text-align: center;
    margin-top:3.5rem;
    font-size:.34rem;
    line-height:.6rem;
  }
  .zzyprop .propcon h3 {
    width: 100%;
    text-align: center;
    font-size:.4rem;
    font-weight:bold;
    margin-top:-.5rem;
  }
  .zzyprop .propcon p.zzyPacket {
    font-size:.34rem;
    margin-top:-.6rem;
  }
  .zzyprop .propcon div {
    width: 100%;
    text-align: center;
    margin-top:-.9rem;
  }
  .zzyprop .propcon span {
    font-size:.8rem;
    color: #666;
  }
  .zzyprop .propcon img {
    position: absolute;
    top:-2rem;
    right:10%;
  }
  .zzy {
    margin-top:-.8rem !important;
  }

  .popup {
    width: 100%;
    height:100vh;
    position: fixed;
    top:0;
    left:0;
    z-index:999;
    background: rgba(0,0,0,.7);
  }
  .popup .popcon {
    width: 100%;
    height:auto;
  }
  .popup .popcon h3 {
    width: 70%;
    margin:0 auto;
    margin-top:6.6rem;
    font-size:.5rem;
    line-height:.8rem;
    color: #ffffff;
    text-align: center;
    border:4px dashed #ffffff;
    border-radius: .2rem;
    font-style: italic;
    font-family: "幼圆";
  }
  .popup .popcon div {
    width: 2rem;
    height: 1rem;
    padding:.2rem;
    border:4px dashed #ffffff;
    margin-left:70%;
    margin-top:.5rem;
    -webkit-border-radius: .2rem;
    -moz-border-radius: .2rem;
    border-radius: .2rem;
  }
  .popup .popcon div>a {
    display: block;
    width: 2rem;
    height: 1rem;
    line-height:1rem;
    background: #bff9e1;
    color: #fff;
    font-size:.34rem;
    text-align: center;
    border-radius: .3rem;
    color: #999999;
    font-family:"幼圆";

  }
  .popup .popcon p {
    color: #fff;
    font-size:.34rem;
    margin-left:58%;
    margin-top:.3rem;
  }
  .popup .popcon img {
    margin-left:68%;
  }

  .banner {
    width: 100%;
    height:auto;
  }
  .banner .swiper-container {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
  .banner .swiper-container .swiper-slide {
    text-align: center;
    font-size: .4rem;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .banner .swiper-container .swiper-slide img {
    width:100%;
    height:auto;
  }
  .banner .title {
    width: 80%;
    margin:0 auto;
    position: relative;
    z-index:99;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top:.2rem;
  }
  .banner .title .banner-line {
    width: 1rem;
    height: 1px;
    background: #333;
  }
  .banner .title p {
    font-size:.3rem;
  }
  .banner .title .rhombus {
    width: .3rem;
    height: .3rem;
    border:1px solid #888888;
    transform: rotate(45deg);
    margin:0 .3rem;
  }
  .content {
    width: 95%;
    height: auto;
    margin: 0 auto;
    margin-top:.3rem;
  }
  .content .tuan{
    display: block;
    width: 100%;
    /*height: 3rem;*/
    position: relative;
    display: flex;
    justify-content: space-between;
    border:1px solid #999;
    position: relative;
  }
  .content .tuan img {
    width:100%;
    height:100%;

  }
  .content .tuan .tuanbox {
    width: 35%;
    position: absolute;
    right:.5rem;
    top:.5rem;
    /*text-align: right;*/
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .content .tuan .tuanbox h3 {
    width: 100%;
    font-size:.4rem;
    font-weight: normal;
    margin-top:.1rem;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .content .tuan .tuanbox p {
    width: 100%;
    font-size:.36rem;
    color: #ff5454;
    margin-top:.3rem;
  }
  .content .tuan .tuanbox del {
    width: 100%;
    font-size:.32rem;
    color: #999;
    margin-top:.2rem;
  }
  .content .tuan .tuanbox div {
    width: 1.4rem;
    height: .6rem;
    background: #000;
    color: #ffffff;
    text-align: center;
    line-height:.6rem;
    margin-top:.3rem;
  }
  .ydzy {
    margin-top:.4rem;
  }
  .content ul {
    width: 100%;
    height:auto;
    margin-top:.4rem;
    display: flex;
    align-items: center;
    justify-content:space-between;
    flex-wrap: wrap;
  }
  .content ul li {
    width: 48%;
    height:auto;
  }
  .content ul li:nth-child(n+3) {
    margin-top:.3rem;
  }
  .content ul li>div {
    width: 100%;
    height:auto;
    border:1px solid #999;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    position: relative;
  }
  .content ul li>div img {
    width: 100%;
    height:100%;
  }
  .content ul li>div .kaibox {
    width: 100%;
    height:auto;
    display: flex;
    flex-wrap: wrap;
  }
  .content ul li>div .kaibox h3 {
    width: 100%;
    text-indent: .2rem;
    height:.8rem;
    line-height:.8rem;
    font-size: .36rem;
    font-weight: normal;
    /*margin-top:1.5rem;*/
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .content ul li>div .kaibox p {
    width: 100%;
    text-indent: .2rem;
    height:.6rem;
    line-height:.6rem;
    font-size: .36rem;
    color: #ff5454;
  }
  .content ul li>div .kaibox del {
    width: 100%;
    height:.6rem;
    line-height:.6rem;
    font-size: .32rem;
    color: #999;
    margin-left:.2rem;
  }
  .content ul li>div .kaibox div {
    width: 1.4rem;
    height: .6rem;
    background: #000;
    color: #ffffff;
    text-align: center;
    line-height: .6rem;
    margin-left:2.8rem;
    margin-top:-1.0rem;
  }

  .content .cantuan {
    width: 100%;
    height:3rem;
    margin-top:.5rem;
    margin-bottom:.3rem;
    border:1px solid #999;
    overflow: hidden;
  }

  .content .cantuan .swiper-wrapper>div {
    width: 100%;
    height:1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .content .cantuan .swiper-wrapper>div .zzw {
    width: 82%;
    display: flex;
    justify-content: flex-start;
    align-items:center;
  }
  .content .cantuan .swiper-wrapper>div img{
    margin-left:.3rem;
    margin-right:.2rem;
  }
  .content .cantuan .swiper-wrapper>div .zzw p {
    width: 100%;
    font-size:.34rem;
    margin-left:.3rem;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space:nowrap;
    display: flex;
    align-items:center;
  }
  .content .cantuan .swiper-wrapper>div .zzw p .user {
    width: 40%;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space:nowrap;
  }
  .content .cantuan .swiper-wrapper>div .zzw p .name {
    width: 60%;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space:nowrap;
  }
  .content .cantuan .swiper-wrapper>div .zzw p i {
    margin:0 .1rem;
    color: #ff5454;
  }
  .content .cantuan .swiper-wrapper>div div.pis {
    width: 1.4rem;
    height: .6rem;
    background: #000;
    color: #ffffff;
    text-align: center;
    line-height: .6rem;
    margin-right: .3rem;
    margin-left:.2rem;
    justify-content: flex-end;
  }


  .foot {
    width: 100%;
    height:1.4rem;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    left:0;
    display: flex;
    align-items: center;
  }
  .foot div {
    width: 50%;
    height:1.4rem;
    text-align: center;
  }
  .foot div i {
    display: block;
    font-size:.6rem;
    margin-top:.2rem;
    color: #999999;
  }
  .foot div p {
    font-size:.32rem;
    color: #999999;
  }
  .active i {
    color: #333 !important;
  }
  .active p {
    color: #333 !important;
  }
</style>
